import * as echarts from '../node_modules/echarts/dist/echarts.esm.js';


// 通过Echarts.init(DOM容器的DOM对象)方法初始化一个Echarts实例
let myChart1 = echarts.init(document.getElementById('mychart1'));
let myChart2 = echarts.init(document.getElementById('mychart2'));


// 使用setOption方法生成图表
myChart1.setOption({   // 图表的配置项和数据

    title: {//配置图表的标题
        text: '第一个Echarts例子-柱状图和折线图'
    },
    legend: {//配置图例,,图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
        data: ['销量', '销售额'], //图例的名称,可以在series中通过name字段表示系列名称
        top: '10%', //图例的位置,可选值:top,bottom,left,right,inside,insideLeft,insideRight
    },
    xAxis: { // 配置X轴
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']//X轴的数据
    },
    yAxis: {// 配置y轴
    },
    series: [ // 图表的系列列表,一个类型的数据可以认为是一个系列
        {
            name: '销量',//系列列表的每个系列通过name字段表示系列名称
            type: 'bar',//系列列表的每个系列通过type字段表示系列类型 -- 柱状图
            data: [120, 200, 150, 80, 70, 110, 130]//系列列表的每个系列通过data字段表示系列的数据
        },
        {
            name: '销售额',//系列列表的每个系列通过name字段表示系列名称
            type: 'line',//系列列表的每个系列通过type字段表示系列类型 --- 折线图
            data: [80, 60, 70, 140, 150, 160, 170]//系列列表的每个系列通过data字段表示系列的数据
        }
    ]
});


myChart2.setOption({
    title: {
        text: '第二个Echarts例子-饼图'
    },
    legend: {
        data: ['销量', '销售额'] //饼状图的图例并不是必须的,如果想要使用图例的话,legend.data 中的每一项，必须和 series.data 中每一项的 name 值一一对应
    },
    series: [ //饼图不需要x轴和y轴
        {
            // name: '销量', //这里不能在使用name,因为图例中有销售和销售额,使用了这个name之后会让他们属于同一项
            type: 'pie',
            data: [
                { value: 100, name: '销量' },
                { value: 200, name: '销售额' },
            ]
        }
    ]
});